<template>
  <div>
    <admin-container>
      <template v-slot:content>
        <table-plugin
            :page="page"
            :config="tableConfig"
            :part-operate="partOperate"
            :global-operate="globalOperate"
            :searchOperate="searchOperate"
            @global="globalOperateActuator"
            @search="searchOperateActuator"
            @part="partOperateActuator"
        />
      </template>
    </admin-container>

    <el-drawer
        title="发布新公告"
        :visible.sync="drawer"
        @close="$refs['noticeRef'].resetFields()"
    >

      <div class="drawer-main">
        <div class="drawer-form">
          <el-form :model="notice" ref="noticeRef" :rules="rules">
            <el-form-item label="公告主题" prop="theme">
              <el-input v-model="notice.theme" placeholder="请输入公告主题"/>
            </el-form-item>
            <el-form-item label="公告内容" prop="theme">
              <el-input v-model="notice.content" placeholder="请输入公告内容"/>
            </el-form-item>
          </el-form>
        </div>
        <div class="drawer-btn">
          <el-button type="primary" size="medium" @click="addNotice">发布公告</el-button>
          <el-button size="medium" @click="drawer = false;">关闭</el-button>
        </div>
      </div>
    </el-drawer>


  </div>
</template>

<script>
import AdminContainer from '@/components/plugs/admin-container/AdminContainer.vue'
import TablePlugin from '@/components/plugs/table-plugin/TablePlugin.vue'
import {post, get} from '@/utils/api'

export default {
  data() {

    return {
      drawer: false,
      notice: {},
      rules: {
        theme: [{required: true, message: '公告主题不能为空', trigger: 'blur'}, {
          min: 5,
          max: 40,
          message: '最少输入5个字符,最多输入40个字符',
          trigger: 'blur'
        }],
        content: [{required: true, message: '公告内容不能为空', trigger: 'blur'}, {
          min: 5,
          max: 450,
          message: '最少输入5个字符,最多输入450个字符',
          trigger: 'blur'
        }]
      },
      page: {},
      tableConfig: {
        columns: [
          {
            fixed: false,
            prop: 'id',
            label: '公告编号',
            width: '150',
          },
          {
            fixed: false,
            prop: 'theme',
            label: '主题',
            width: '150',
          },
          {
            fixed: false,
            prop: 'content',
            label: '内容',
            width: '200',
          },
          {
            fixed: false,
            prop: 'publisherName',
            label: '发布者',
            width: '100',
          },
          {
            fixed: false,
            prop: 'createTime',
            label: '创建时间',
            width: '200',
          }

        ]
      },
      partOperate: [
        {type: 'delete', text: '删除', level: 'text', color: 'red'},
      ],
      globalOperate: {
        left: [
          {type: 'add', text: '发布新公告', level: 'primary', icon: ''},

        ]
      },
      searchOperate: {
        entity: {},
        condition: [
          {label: '公告主题', prompt: '请输入公告主题', type: 'input', width: '300px', name: 'theme'}

        ]
      }

    }
  },
  methods: {
    // 新增一条公告
    addNotice() {
      this.$refs['noticeRef'].validate((valid) => {
        if (valid) {
          const promise = post({
            url: '/base-system/back/notice/add',
            data: {
              ...this.notice
            }
          });
          promise.then(res => {
            if (res.code === 200) {
              this.$message.success(res.message);
              this.getpage();
              this.drawer = false;
              return;
            }
            this.$message.error(res.message);
          })
        } else {
          this.$message.error('表单验证码不通过,请检查~')
        }
      })
    },
    // 获取公告列表
    getpage() {
      const promise = get({
        url: '/base-system/back/notice/page',
        params: {
          current: this.page.current,
          size: this.page.size,
          theme: this.searchOperate.entity.theme
        }
      });
      promise.then(res => {
        if (res.code === 200) {
          this.page = res.data;
        }
      })
    },
    // 删除公告
    deleteNotice(row) {
      const promise = post({
        url: '/base-system/back/notice/delete',
        data: {id: row.id}
      });
      promise.then(res => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.getpage();
        } else {
          this.$message.error(res.message);
        }
      })
    },
    globalOperateActuator(entity) {
      // console.log('g',entity);
      switch (entity.operate.type) {
        case 'add':
          this.drawer = true;
          break;
      }
    },
    // 搜索博文
    searchOperateActuator() {
      console.log('搜索条件', this.searchOperate.entity);
      this.getpage();
    },
    // 删除博文
    partOperateActuator(index, row, operate) {
      switch (operate.type) {
        case 'delete':
          this.deleteNotice(row);
      }
    }

  },
  components: {
    AdminContainer,
    TablePlugin

  },
  created() {
    this.getpage();
  }
}
</script>

<style scoped>
.drawer-main {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

.drawer-btn {
  position: fixed;
  bottom: 0;
  padding-bottom: 20px;
}

</style>